<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom></HeadCustom>
		<view class="content-wrap fboxCol Ycenter Xcenter bg-F7F8FF">
			<view class="input-tips fboxCol Ycenter font24 color-main">
				<view class="font-weight">语音示例：</view>
				<view class="mt40">您好，欢迎您访问我的本无名片，我叫小无，很高兴认识您，请收下我的名片，期待我们有合作的机会！</view>
			</view>
			<view class="voice-lay bg-base">
				<view v-if="status == 0" class="viice-start fboxCol Ycenter Xcenter" @click="soundRecording(0)">
					<image class="icon-btn btn-start" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/recruit/voice-2.png" mode=""></image>
					<view class="mt15 font28 color-main">开始录音</view>
				</view>
				<view v-if="status == 1" class="viice-stop fboxCol Xcenter Ycenter">
					<view class="voice-tips fboxRow Ycenter Xcenter color-969699 font24">最长录制时间：50秒</view>
					<view class="voice-time fboxRow Ycenter Xcenter font48">{{ getMinuteTime(voiceTime) }}</view>
					<view class="icon-line line-animation"></view>
					<view class="ft mt40">
						<image class="icon-btn btn-stop" @click="soundRecording(1)" src="https://ebc-prod.cdn.benwunet.com/uni-static/icon_voice_record_stop.png" mode=""></image>
					</view>
				</view>
				<view v-if="status == 2">
					<view class="voice-tips fboxRow Ycenter Xcenter color-969699 font24">最长录制时间：50秒</view>
					<view class="voice-time fboxRow Ycenter Xcenter font48">{{ getMinuteTime(voiceTime) }}</view>
					<view class="icon-line" :class="{ 'line-animation': music_play }"></view>
					<view class="ft fboxRow Ycenter mt40">
						<view class="btn-cancel fboxRow Ycenter Xcenter" @click="closeVoice"><u-icon name="trash" color="#111018" size="47rpx"></u-icon></view>
						<view class="flex1 fboxRow Ycenter Xcenter" @click="soundRecording(2)">
							<image v-if="!music_play" class="icon-btn" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/recruit/voice-4.png" mode=""></image>
							<image v-if="music_play" class="icon-btn" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/recruit/voice-5.png" mode=""></image>
						</view>
						<view class="btn-upload fboxRow Ycenter Xcenter" @click="submitVoice"><u-icon name="checkmark" color="#111018" size="47rpx"></u-icon></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { strTrim } from '@/static/js/common.js';
import { fileUploadAnon } from '@/api/index.js';
import { cardVoiceExamination, cardVoiceUpdate } from '@/api/card.js';
export default {
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			status: 0, // 0 : 未开始   1：录音中   2 : 录制完成
			title: '点击开始录音',
			voiceTime: 0,
			voicePath: '', //录音的文件路径
			music_play: false,
			uploadUrl: 'https://www.hbwh.com/api/uploadfile', //上传音频文件的地址
			recorderManager: null
		};
	},
	onShow() {
		this.recorderManager = uni.getRecorderManager();
		console.log('this.recorderManager===', this.recorderManager);
	},
	methods: {
		getMinuteTime(data) {
			let minute = parseInt(data / 60);
			let second = parseInt(data % 60);
			if (minute.toString().length == 1) minute = `0${minute}`;
			if (second.toString().length == 1) second = `0${second}`;
			return `${minute}:${second}`;
		},
		deleteVoice(index) {
			this.voiceList.splice(index, 1);
		},
		closeVoice() {
			this.isShow = 0;
			this.voiceTime = 0;
			this.status = 0;
			this.title = '点击开始录音';
			this.music_play = false;
			clearInterval(this.timeupdata);
		},
		soundRecording(status) {
			if (status == 0) {
				//开始录音
				const options = {
					//参数
					duration: 600000,
					sampleRate: 44100,
					numberOfChannels: 1,
					encodeBitRate: 192000,
					// format: 'mp3',
					format: 'aac',
					frameSize: 50
				};
				this.recorderManager.start(options);
				this.timeupdata = setInterval(() => {
					this.voiceTime++;
				}, 1000);
				this.status = 1;
				this.title = '点击结束录音';
			} else if (status == 1) {
				//结束录音
				this.status = 2;
				this.title = '录制完成';
				clearInterval(this.timeupdata);
				this.recorderManager.stop();
				this.recorderManager.onStop(res => {
					this.voicePath = res.tempFilePath; //记录文件路径
				});
			} else if (status == 2) {
				//录制完成, 点击播放录音
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.src = this.voicePath;
				if (this.music_play) {
					this.music_play = false;
					this.innerAudioContext.pause();
				} else {
					this.music_play = true;
					this.innerAudioContext.play();
				}

				this.innerAudioContext.onEnded(() => {
					this.music_play = false;
				});
			}
		},
		submitVoice() {
			uni.showLoading({
				title: '保存中...',
				icon: 'none'
			});
			console.log('this.voicePath========', this.voicePath);
			fileUploadAnon({
				path: this.voicePath
			})
				.then(res => {
					if (res.data) {
						// 验证音频是否合格
						cardVoiceExamination({ voiceUrl: res.data.url }).then(eres => {
							if (eres.data) {
								cardVoiceUpdate({ customVoiceUrl: res.data.url })
									.then(res => {
										if (res.data) {
											let pages = getCurrentPages(); // 当前页面
											let beforePage = pages[pages.length - 3]; // 前一个页面
											uni.navigateBack({
												delta: 2,
												success: function() {
													beforePage.$vm.getVoice({ customVoiceUrl: res.data.url }); // 执行前一个页面的刷新
												}
											});
										}
									})
									.finally(() => {
										uni.hideLoading();
									});
							}
						});
					}
				})
				.catch(e => {
					console.log('接口报错了');
					uni.hideLoading();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.content-wrap {
	height: calc(100vh);
}
.btn-cancel,
.btn-upload {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	overflow: hidden;
	background-color: #e8edf1;
}
.input-item {
	padding: 0 40rpx;
	height: 285rpx;
}
.icon {
	width: 102rpx;
	height: 102rpx;
}
.tit {
	margin-top: 16rpx;
}

.input-tips {
	padding: 15rpx 40rpx;
	line-height: 36rpx;
}

.voice-lay {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 470rpx;
	z-index: 10;
}
.voice-tips {
	height: 104rpx;
}
.viice-start {
	height: 406rpx;
}
.icon-box {
	width: 100%;
	padding: 0 20rpx;
	overflow: hidden;
}
.icon-line {
	margin: 58rpx auto 0;
	width: 340rpx;
	height: 70rpx;
	background: url('https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/recruit/icon-audio-line3.png') repeat-x top center;
	background-size: auto 70rpx;
}
.line-animation {
	animation: animate_background 10s linear 0s infinite;
}
@-webkit-keyframes animate_background {
	0% {
		background-position: 0 0;
	}
	50% {
		background-position: -340rpx 0;
	}
}

.ft {
	padding: 0 40rpx;
}
.icon-btn {
	width: 88rpx;
	height: 88rpx;
}
.cancel-btn {
	background-color: #f0f0f5;
	border-radius: 50%;
	overflow: hidden;
}
</style>
